<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  
       <style>
           .c-nav ul li{
               float: left;
               padding-right: 20px;
               list-style: none;
           }
           .c-nav{
               border: 1px solid red;
               height: 50px;
           }

           span{
              width: 80px;
              height: 42px;
               position: absolute;
               left: 0;
               top: 10;
               background: url(/cloud.gif) no-repeat;
           }
           img{
               width: 50px;
               height: 50px;
           }
           .c-nav ul{
               position: absolute;
           }
       </style>
</head>
<body>
    <div id="c_nav" class="c-nav">
        	       <span class="cloud"></span>
        	       <ul>
        	            <li class="current"><a href="#">首页新闻</a></li>
        	            <li><a href="#">师资力量</a></li>
        	            <li><a href="#">活动策划</a></li>
                        <li><a href="#">企业文化</a></li>
        	            <li><a href="#">招聘信息</a></li>
        	            <li><a href="#">公司简介</a></li>
        	            <li><a href="#">我是佩奇</a></li>
        	            <li><a href="#">啥是佩奇</a></li>
        	        </ul>
       	    </div>
       
          <script>
              $(function()
              {
                  //给li绑定鼠标移上事件
                   var count = 0;
                  $("li").bind("mouseenter",function()
                  {
                      //span标签是以初始位置移动的
                    $("span").animate({left:this.offsetLeft})
                   
                })
                   //给li绑定鼠标移出事件
                   $("li").bind("mouseleave",function()
                   {
                    $("span").animate({left:count})
                   })

                   //给li绑定点击事件
                   $("li").bind("click",function()
                   {
                       count = this.offsetLeft;
                   })
              })
          </script>
          
          


          
</body>
</html>